<template>
    <div class="pie-container">
        <!-- 饼图 -->
        <div ref="chartDom" class="com-chart"></div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import * as echarts from 'echarts';

@Component({
    name: 'TransfinitePie',
})
// 饼图
export default class TransfinitePie extends Vue {
    @Prop() echartData;
    chartInstance: any = null;

    @Watch('echartData', { immediate: true, deep: true })
    onWatchData(newData) {
        console.log(this.echartData, 'echart');

        if (newData) {
            let that = this;
            this.$nextTick(() => {
                that.updateChart(newData);
            });
        }
    }
    mounted() {
        this.initChart();
    }

    initChart() {
        let _this = this;
        this.chartInstance = echarts.init(this.$refs.chartDom);
        const initOption = {
            color: this.echartData.color,
            grid: {
                left: 500,
                top: 50,
                bottom: 10,
                right: 10,
                containLabel: true,
            },
            legend: {
                show: true,
                selectedMode: false,
                orient: 'horizontal',
                bottom: '2%',
                itemGap: 10,
                itemWidth: 10,
                itemHeight: 10,
                icon: 'circle',
                textStyle: {
                    fontSize: 9,
                    color: '#666',
                },
            },
            polar: {},
            angleAxis: {
                interval: 1,
                type: 'category',
                data: [],
                z: 10,
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#0B4A6B',
                        width: 1,
                        type: 'solid',
                    },
                },
                axisLabel: {
                    show: false,
                    interval: 0,
                    color: '#0B4A6B',
                    margin: 8,
                    fontSize: 14,
                },
            },
            radiusAxis: {
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
            },
            calculable: true,
            series: [
                {
                    type: 'pie',
                    radius: ['40%', '60%'],
                    roseType: false,
                    zlevel: 10,
                    avoidLabelOverlap: true,
                    legendHoverLink: false,
                    selectedMode: false,
                    stillShowZeroSum: true,
                    // minAngle: 15, // 最小角度
                    // startAngle: 180, // 起始角度
                    minShowLabelAngle: 0.01,
                    label: {
                        show: true,
                        // formatter: '{b|{b}}\n{c|{c}} {d|{d}%}',
                        formatter: '{c}',
                        rich: {
                            b: {
                                fontSize: 9,
                            },
                            c: {
                                fontSize: 9,
                                lineHeight: 14,
                            },
                            d: {
                                fontSize: 9,
                                lineHeight: 14,
                            },
                            title: {},
                            num: {
                                lineHeight: 14,
                            },
                        },
                        emphasis: {
                            fontSize: 9,
                            // show: true,
                            // scale: false,
                            // scaleSize: 1,
                        },
                    },
                    data: this.echartData.data,
                },
            ],
        };
        this.chartInstance.setOption(initOption);
        // 点击事件
        this.chartInstance.on('click', param => {
            const name = param.name;
            // 新增指标待复核=统计偏严指标且事件状态为“未发送”的事件；超限指标待复核=统计偏严指标且事件状态为“调整中”的事件。
            const params = { eventStatusList: name == '新增指标待复核' ? ['0'] : ['1'] };
            this.$emit('click-bar', params);
        });
    }
    updateChart(e) {
        const dataOption = {
            series: [{ data: this.echartData.data }],
        };
        this.chartInstance.setOption(dataOption);
    }

    dispose() {
        this.chartInstance.dispose(); // 销毁实例
    }
}
</script>

<style scoped>
.pie-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.com-chart {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
